<!--1.继承base基模板 -->
{% extends 'base.html' %}

<!--2.bokeh样式模板 -->
{% block head %}
    {{ js_resources| safe }}
    {{ css_resources| safe }}
{% endblock %}

<!--3.sidebar左侧菜单栏选项模板 -->
{% block sidebar %}
    <ul class="nav nav-sidebar">
        <li><a href="{{url_for('dashboard')}}">bokeh_MPG</a></li>
        <li class="active"><a href="{{url_for('vbar')}}">Vbar <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Reports</a></li>
        <li><a href="#">Analytics</a></li>
        <li><a href="#">Export</a></li>
    </ul>
    <ul class="nav nav-sidebar">
        <li><a href="">Nav item</a></li>
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>
        <li><a href="">More navigation</a></li>
    </ul>
    <ul class="nav nav-sidebar">
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>∂
    </ul>
{% endblock %}

<!--4.左侧bokeh绘图区 -->
{% block plot %}
    {{ plot_script| safe }}
    {{ plot_div| safe }}

{% endblock %}

<!--5.右侧bokeh表格区-->
{% block table %}
<table class="table table-striped">
    <tr>
        {% for title in  the_titles  %}
            <th>{{ title }}</th>
        {% endfor %}
    </tr>

    {% for content in  the_contents  %}
        <tr>
                {% for item in content %}
                <td>{{ item }}</td>
                {% endfor %}
        </tr>
    {% endfor %}

</table>
{% endblock %}


